<template>
  <div>
    <!-- 新增导航区域 -->
    <van-cell-group>
      <van-cell v-for="(route, index) in routes" :key="index" :title="route.title" is-link :to="route.path" />
    </van-cell-group>

    <div class="title1">当前项目的公共组件</div>

    <DemoLine title="SelectBlock.vue">
      <SelectBlock text="SelectBlock" @click="handleSelectBlockClick" />
    </DemoLine>

    <DemoLine title="Panel1.vue，没有标题Action">
      <Panel1 :icon="'/images/icon_qushi.png'" :text="'测试标题1'">
        <div style="height: 100px;background-color: #ccc;">测试内容高度 100% x 100px</div>
      </Panel1>
    </DemoLine>

    <DemoLine title="Panel2.vue + Title Action">
      <Panel2 :icon="'/images/icon_qushi.png'" :text="'测试标题2'">
        <div style="height: 100px;background-color: #ccc;">测试内容高度 100% x 100px</div>

        <template #headerAction>
          <div style="color:aqua; padding: 8px;" @click="handleSelectBlockClick">查看规则</div>
        </template>
      </Panel2>
    </DemoLine>

    <!-- echart -->
    <DemoLine title="全局组件echart：5.4.2 <GChart>">
      <GChart :options="options" />
    </DemoLine>
  </div>
</template>

<script setup>
import DemoLine from './DemoLine.vue';
import Panel1 from '@/views/components/Panel1.vue';
import Panel2 from '@/views/components/Panel2.vue';
import SelectBlock from '@/views/components/SelectBlock.vue';

const routes = [
  { title: 'Overlay1', path: '/demo/overlay1' },
  { title: '测试页面', path: '/demo/debug' },
];

const options = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    axisLabel: {
      formatter: (value) => `Day: ${value}`,
    },
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: "line",
    },
  ],
};

const handleSelectBlockClick = () => {
  console.log('SelectBlock clicked!');
};

</script>

<style scoped>
.title1 {
  margin: 10px;
  font-size: 16px;
}
</style>
